<template>
  <div class="index" :style='{"background-color": ground_color}'>
   <div :style='{"background-color": ground_color}'>
    <!-- # 标题 -->
    <div class="tabbar" :style="{background:tabbar_color}">
        <span>小小笔记本</span>
        <div class="others">
            <router-link class="selection" to="/"><i class="el-icon-s-promotion "></i>首页</router-link>
            <router-link class="selection" to="/filing"><i class="el-icon-s-flag"></i>归档</router-link> 
            <router-link class="selection" to="/about"><i class="el-icon-share"></i>关于</router-link>
            
            <div class="up_input">
                <el-input placeholder="搜索笔记内容" v-model="input" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <router-link v-if="not_Login" class="selection" to="/login">&nbsp; 登录</router-link> 
            <router-link v-if="not_Login" class="selection" to="/register">&nbsp; 注册</router-link> 
            <router-link v-if="!not_Login" class="selection" to="/personal_center">
                <img class="head_img selection" v-if="!not_Login" :src="imgUrl.imgUrl" alt="">
                &nbsp;{{ this.name }}
            </router-link>
        </div>
    </div>

    <!-- 首页 -->
    <div class="center drop">
        <div class="left" >
            <!-- 写文章 -->
            <div class="slideshow" :style='{"background-color": write_color}'>
                <router-link to="/write">
                  <div class="aaa">
                    <button style="background-color: transparent; border:0px; width: 100px; height: 100px; font-size: 30px;"><i class="el-icon-plus"></i></button>
                    <span>新增文章</span>
                  </div>
                </router-link>
            </div>
            <!-- 往期文章 -->
            <div class="artical">
              <!-- 排序法则 -->
                <div>
                  <!-- 排序选项(时间排序/热度排序) -->
                  <el-menu :style='{"background-color": background_color}' 
                    active-text-color="dodgerblue"
                   :default-active="activeIndex"
                    class="el-menu-demo" mode="horizontal" @select="handleSelect">
                      <el-menu-item index="1"><i class="el-icon-watch"></i> 时间排序</el-menu-item>
                      <!-- <el-menu-item index="2"><i class="el-icon-star-off"></i> 热度排序</el-menu-item> -->
                  </el-menu>
                </div>

                <ul class="artical_list" :style='{ "color": font_color}' >
                    <li v-for="item in artical_list" :key="item.id" class="artical_item" :style='{"background-color": background_color, "margin-bottom": "5px"}'>
                      <!-- 左侧图片 -->
                        <div class="image">
                            <img :src="item.image_url" alt="">
                        </div>
                        <div class="artical_detail">
                          <!-- 上侧作者 -->
                          <div style="font-size: 9px;" class="author">
                            <div>
                                <img :src="item.writer_img_url" style=" width: 27px; height: 27px; border-radius: 50%"  alt="">
                                <span>&nbsp;{{ item.writer }}</span>
                            </div>
                            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-date">&nbsp;</i>{{ item.add_time }}</div>
                          </div>
                          
                          <div class="content">
                            <!-- 文章标题 -->
                            <router-link class="title" :to="'/artical/' + item.id">&nbsp;&nbsp;{{ item.title }}</router-link>
                            <div class="artical_neirong">
                              <!-- 二级标题 -->
                              <p>
                                &nbsp;&nbsp;&nbsp;&nbsp;{{ item.second_title }}
                              </p>
                            </div>
                            <div class="details">
                                <span style="color: tomato;"><i  class="el-icon-notebook-2"></i>&nbsp;{{ item.kind__kind_name }}&nbsp;&nbsp;</span>
                                <span><i class="el-icon-view"></i> 查看数：{{ item.read_num }}&nbsp;&nbsp;</span>
                                <span><i class="el-icon-chat-dot-round"></i> 评论数：{{ item.comment_num }} </span>
                            </div>
                          </div>
                        </div>
                    </li>
                </ul>

                <div class="fenye">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"   
                    :background='true' 
                    :pager-count="pagerCount"
                    layout="total, prev, pager, next, jumper"
                    :total="artical_fenye">
                  </el-pagination>
                </div>
            </div>
        </div>
        
        <div class="right">
          <!-- 博主介绍 -->
          <div :style='{"background-color": background_color, "color": font_color}' class="personaled">
              <div class="personnal_spaced" >
                  <div>
                      <img src="http://106.14.19.62:8888/group1/M00/00/00/rBw6gmEhKRKAfVr-AAGkiHjSOso.timg.j" alt="">
                  </div>
                  <img class="img_kuangkuang" :src="Bozhu_url.url" alt="">
                  <div style="display: flex;  justify-content: center; margin-top: 10px;">
                      <span style="height: 35px; line-height:15px; font-size: 18px; color: #FE9A2E">leslie&nbsp;</span>
                      <span style="height: 18px; line-height:18px; width: 36px; color: white; background: #00BFFF; border-radius: 5px;">&nbsp;博主&nbsp;</span>
                  </div>
                  <div class="zuoyouming">
                      执着于理想，纯粹于当下
                  </div>
                  <div class="communications">
                      <el-popover
                        placement="left"
                        width="150"
                        trigger="click">
                          <div>
                            <img src="http://106.14.19.62:8888/group1/M00/00/00/rBw6gmEhKY2AY6nGAAIlFlpmvTA.495BC2" alt="">
                          </div>
                        <img slot="reference" style=" margin-right: 15px;" src="http://106.14.19.62:8888/group1/M00/00/00/rBw6gmEhKs-APuU1AAAc0iGjVlI.qq.png" alt="">
                      </el-popover>
                      
                      <el-popover
                        placement="right"
                        width="150"
                        trigger="click">
                          <div>
                            <img src="http://106.14.19.62:8888/group1/M00/00/00/rBw6gmEhKcOAJBVZAAHL8pEQFak.IMG_70" alt="">
                          </div>
                          <img slot="reference" src="http://106.14.19.62:8888/group1/M00/00/00/rBw6gmEhKwSAC1buAAAlzt22Jpc.weixin" alt="">
                      </el-popover>
                  </div>
              </div>
          </div>
            <!-- 个人空间 -->
            <div :style='{"background-color": background_color, "color": font_color}' class="personal">
                <div class="personnal_space">
                    <div>
                      <span style="font-size: 16px; "><i class="el-icon-place">&nbsp;个人空间</i> </span>
                      <div @click="checkButton()">
                        <i style="margin-top: 5px;" class="el-icon-sunny"></i>
                        <el-switch
                          class="anniu"
                          v-model="value"
                          active-color="#22303f"
                          inactive-color="#f4f4f4"
                          >
                        </el-switch>
                        <i style="margin-top: 5px;" class="el-icon-moon"></i>
                      </div>
                    </div>
                      <ul class="personal_list">
                          <a target="_blank" class="personal_list_item" href="https://user.qzone.qq.com/2769086248">
                            <i class="iconfont icon" style="font-size: 30px;">&#xe72f;</i>
                              <div> QQ空间</div>
                          </a>
                          <a target="_blank" class="personal_list_item" href="https://gitee.com/explore">
                            <i  class="iconfont icon" style="font-size: 30px;">&#xe503;</i>
                            <div>码云</div>
                          </a>
                          <a target="_blank" class="personal_list_item" href="https://github.com/">
                            <i  class="iconfont icon" style="font-size: 30px;">&#xe61a;</i>
                            <div >Github</div>  
                          </a>
                      </ul>
                      <ul class="personal_list">
                          <a target="_blank" class="personal_list_item" href="https://blog.csdn.net/">
                            <i class="iconfont icon" style="font-size: 30x;">&#xe619;</i>
                            <div>CSDN</div>
                          </a>
                          <a target="_blank" class="personal_list_item" href="https://webvpn.hfut.edu.cn/">
                            <i class="iconfont icon" style="font-size: 30px;">&#xe60d;</i>
                            <div>合肥工大</div>
                          </a>
                          <li class="personal_list_item"> </li>
                      </ul>
                </div>
            </div>
            <!-- 文章分类 -->
            <div :style='{"background-color": background_color, "color": font_color}' class="classification">
              <div class="barbar "> 
                <span style="font-size: 16px; "><i class="el-icon-folder-opened">&nbsp;文章分类</i> </span>
              </div>
                <ul class="classfication_list">
                  <li v-for="item in type_list" :key="item.kind_num" class="classfication_list_item">
                      <router-link :to="'/artical_type/'+item.kind_num">
                        <div >
                          <i class="el-icon-caret-right"></i> <span>{{ item.kind_name }}</span>
                        </div>
                      </router-link>
                      <div class="number">{{ item.artical_num }}</div>
                  </li>
                  
                </ul>
            </div>
            <!-- 友情链接 -->
            <div :style='{"background-color": background_color, "color": font_color}' class="friend_url">
                <div>
                    <div class="barbar "> 
                      <span style="font-size: 16px; "><i class="el-icon-connection">&nbsp;友情链接</i> </span>
                    </div>
                </div>
                <div class="friend_url_list">
                    <ul >
                      <li class="friend_url_list_item ">
                        <a target="_blank" href="https://tendcode.com/">TendCode</a>
                      </li>
                      <li class="friend_url_list_item ">
                        <a target="_blank" href="https://yangchaoyi.vip/posts/205511/">超逸の博客</a>
                      </li>
                      <li class="friend_url_list_item ">
                        <a target="_blank" href="http://wangbin.cloud/">惜缘梦</a>
                      </li>
                      <li class="friend_url_list_item ">
                        <a target="_blank" href="https://2dogz.cn/">Blogin</a>
                      </li>
                  </ul>
                  <ul >
                    <li class="friend_url_list_item ">
                        <a target="_blank" href="https://www.bilibili.com/">Bilibili</a>
                      </li>
                      <li target="_blank" class="friend_url_list_item ">
                        <a target="_blank" href="http://www.silisili.cc/">Silisili</a>
                      </li>
                      <li class="friend_url_list_item ">
                        <a target="_blank" href="http://halihali2.com/">Halihaili</a>
                      </li>
                  </ul>
                </div>
                
            </div>
        </div>
    </div>
    <!-- 打赏 -->
    <div class="dashang">
        <el-popover
          placement="left"
          width="200"
          trigger="hover">
            <div>
              <span style="color: orange;">欢迎各位老爷打赏本站^_^</span>
              <el-tabs :stretch=true type="border-card" tab-position="left" style="height: 200px;">
                  <el-tab-pane label="微信">
                      <img style="width: 100px; height: 100px; margin-top:20px;" src="http://106.14.19.62:8888/group1/M00/00/00/rBw6gmEhKd2AZtEzAAHDBmuNgZk.8FE801" alt="">
                  </el-tab-pane>
                  <el-tab-pane label="支付宝">
                      <img style="width: 100px; height: 100px; margin-top:20px;" src="http://106.14.19.62:8888/group1/M00/00/00/rBw6gmEhKf2APjxcAADtcDjEN9c.BA43C6" alt="">
                  </el-tab-pane>
              </el-tabs>
            </div>
          <div slot="reference">公告&赞赏</div>
        </el-popover>
    </div>
      <!-- 底部的备案信息 -->
      <div class="legal">
        <div class="legal_inner">
          Copyright © 2021 Leexun. powered by Django.
        </div>
        <div class="legal_inner">
          <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">皖ICP备2021008932号</a>
          <span>&nbsp; | &nbsp;已续航{{ day }}天</span>
        </div>
      </div>
      </div>
  </div>
</template>

<script>
import { color, host } from '../network/color_check.js';
import Cookies from 'js-cookie';
import Qs from 'qs'
import axios from 'axios';

export default {
  name: 'index',
  data () {
    return {
        loading: false,
        day: 0,
        not_Login: true,
        name: '',
        imgUrl: {
          'imgUrl': ''
        },
        Bozhu_url: {
          'url': ''
        },

        artical_list: [],
        artical_fenye: 0, 
        currentPage:1, //初始页
        pagesize: 8,  //每一页的数量,
        pagerCount:5, //展示到多少页时 中间显示...，取值在5~21之间

        type_list: [],
        input: '',
        ground_color: '#f4f4f4', // 背景色 #f4f4f4是原来的颜色，#22303f是暗黑色, 
        background_color: 'white', // 元素的背景颜色，white, #18222d!important
        font_color: 'black',
        a_color: 'pink',
        tabbar_color: 'pink',
        write_color: '#eff7ff', // #18222d!important
        activeIndex: '1',
        value: false,
    }
  },
  created() {
      this.loading = true;
      this.day = this.dateDiff('2021-08-11');
      var a = Cookies.get();
      // 遍历cookie的值
      for(let key in a){
        // console.log(key);
        if( a[key] === '1' ) {
          this.not_Login = false;
          this.name = key;
          // console.log('name: ' + this.name);
          break;
        }
      }
      if( this.name === '' ){
            // this.not_Login = color.not_Login;
            this.not_Login = true;
      } else {
        this.getImgUrl();
      }
      this.ground_color = color.ground_color;
      this.background_color = color.background_color;
      this.font_color = color.font_color;
      this.tabbar_color = color.tabbar_color;
      this.a_color= color.a_color;
      this.write_color = color.write_color;
      this.value = color.value;
      //首先，在mounted钩子window添加一个滚动滚动监听事件
      window.addEventListener("scroll", this.handleScroll);
      // 发送axios请求获取文章类别
      axios({
            url: host.url + '/kind/kinds.html',
            method: 'get',
        })
        .then(suc =>{
            this.type_list = suc.data.kind_list;
        })
        .catch(fail => {
          this.$message.error("获取文章类别列表失败了..");
        });
      this.getArtical_by_time();
      this.get_Bozhu_url();
      this.loading = false;
  },
  methods: {
    // 算时间：2021-08-11
    dateDiff(sDate1) {
			 	var date2 = new Date();
			 	var date1 = new Date(Date.parse(sDate1.replace(/-/g,   "/")));
			 	var iDays = parseInt(Math.abs(date2.getTime()- date1.getTime()) /1000/60/60/24); 
			 	return iDays;
		},
    // 我的imgurl
    get_Bozhu_url() {
        axios({
          url: host.url + '/Users/get_My_info.htm',
          method: 'get'
        }).then(suc => {
            this.Bozhu_url.url = suc.data.url;
        }).catch(fail => {})
    },
      // 分页函数
    handleSizeChange(size){
          //选择一页展示多少数据时 调用的方法
        this.pagesize = size;
    },

    handleCurrentChange(currentPage){
        //点击页面项 的函数响应
        this.currentPage = currentPage;
        this.getArtical_by_time();
    },
    
    // 获取文章，以时间顺序：
    getArtical_by_time() {
      // 发送axios请求获取文章类别
      axios({ 
            url:  host.url + '/artical/articals/'+ this.currentPage + '.htm',
            method: 'get',
        })
        .then(suc =>{
            this.artical_list = suc.data.artical_list;
            this.artical_fenye = suc.data.Allsize;
        })
        .catch(fail => {
          this.$message.error("获取文章失败啦..");
        });
    },
      // 获取头像的地址
      getImgUrl() {
          // 查找cookie中有没有url的链接
          // if( Cookies.get('img_url') ) {
          //     this.imgUrl.imgUrl = Cookies.get('img_url');
          //     return ;
          // }
          // 如果名字不是空的
              // 如果没有
            axios({
                url:  host.url+'/Users/getImage/' + this.name + '.htm',
                method: 'get',
            })
            .then(suc => {
                // 写入cookie
                // console.log(suc.data.data);
                this.imgUrl.imgUrl = suc.data.data;
                // Cookies.set('img_url', suc.data.data);
            })
            .catch( fail => {
                console.log(fail);
                this.$message.error("头像获取失败了");
            })
      },
      // 按下按钮切换主题
      checkButton() {
          // console.log(this.value);
          if( this.value === false ) {
            // 如果按钮是白色的，则tabbar的颜色是粉红色，背景是默认，各个板块的颜色是白色
            this.ground_color = color.ground_color =  "#f4f4f4";
            this.background_color = color.background_color = "white";
            this.font_color = color.font_color = "black";
            this.tabbar_color = color.tabbar_color = "pink";
            this.a_color= color.a_color = 'pink';
            this.write_color = color.write_color ='#eff7ff';
            color.value = false;
          }else {
            this.ground_color = color.ground_color = "#22303f";
            this.background_color = color.background_color ="#18222d!important";
            this.font_color = color.font_color = "#9caec7";
            this.tabbar_color = color.tabbar_color = "#18222d!important";
            this.a_color= color.a_color = '#18222d!important';
            this.write_color = color.write_color = '#18222d!important';
            color.value = true;
          }

      },
      handleSelect(key, keyPath) {
        // 发送axios请求获取文章类别
        if( key === '1'  ) {
          // 按照文章发表的时间获取
          this.getArtical_by_time();
        } else if( key === '2' ) {
            axios({
                url:  host.url+'/artical/articals_by_fire/'+ 1 +'.htm',
                method: 'get',
            })
            .then(suc =>{
                this.artical_list = suc.data.artical_list;
                this.artical_fenye = suc.data.Allsize;
            })
            .catch(fail => {
              this.$message.error("获取文章失败啦..");
            });
        }
      },
      //然后在方法中，添加这个handleScroll方法来获取滚动的位置
      handleScroll() {
        let scrollTop =
          window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let offsetTop = document.querySelector(".tabbar").offsetTop;

        //设置背景颜色的透明度
        if (offsetTop && scrollTop) {
          // this.color = `rgba(0, 0, 0,${ scrollTop / (scrollTop + 50)})`;
        } else if (scrollTop == 0) {
          this.tabbar_color = this.a_color;
        }
        else if(scrollTop != 0)
        {
            this.tabbar_color = "white";
        }
      },
  },
//由于是在整个window中添加的事件，所以要在页面离开时摧毁掉，否则会报错
  beforeDestroy() {
      window.removeEventListener("scroll", this.handleScroll);
  },
}
</script>


<style>
.iconfont {
  font-size: 25px;
}

.el-tabs__item {
  padding: 0 5px;
}
.el-tabs{
  margin-top: 20px;
  margin-left: -12px;
  margin-right: -12px;
  margin-bottom: -12px;
  box-shadow: 0 0px 0px #ccc;
  border: 0px; 
}
.el-tab-pane {
  margin-left: -25px;
  margin-right: -30px;
}
.dashang {
  position: fixed;
  width: 30px;
  height: 140px;
  font-size: 18px;
  bottom: 180px;
  right: 3px;
  background-color: rgb(58, 76, 91);
  color: aliceblue;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  text-align: center;
  margin: 2px;
  
}
.communications {
  display: flex;
  justify-content: center;
}
.communications img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 15px;
  margin-top: 10px;
}
.zuoyouming {
  width: 100%;
  font-size: 18px;
  font-family: STXingkai;
  display: flex;
  justify-content: center;
  margin-top: -5px;
}
.img_kuangkuang {
  display: block;
  border-radius: 50%;
  width: 75px;
  height: 70px;
  margin: -30px auto auto;
  position: relative;
}
.img_kuangkuang:hover {
  -webkit-animation:rotateplane 1.2s infinite ease-in-out;
  animation:rotateplane 1.2s infinite ease-in-out;
}
.personaled {
    margin-top: 25px;
    width: 100% ;
    background-image: '../assets/timg.png';
}
.fenye {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 70px;
  margin-bottom: 20px;
}

  
@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform:perspective(220px);
  }
  50% {
    -webkit-transform:perspective(220px) rotateY(180deg);
  }
  100% {
    -webkit-transform:perspective(220px) rotateY(180deg) rotateX(180deg);
  }
}
@keyframes rotateplane {
  0% {
    transform:perspective(120px) rotateY(0) rotateX(0);
    -webkit-transform:perspective(220px) rotateY(0) rotateX(0);
  }
  50% {
    transform:perspective(120px) rotateY(0) rotateX(-180.1deg);
    -webkit-transform:perspective(220px) rotateY(0) rotateX(-180.1deg);
  }
  100% {
    transform:perspective(120px) rotateY(-179.9deg) rotateX(-180deg);
    -webkit-transform:perspective(220px) rotateY(-179.9deg) rotateX(-180deg);
  }
}
</style>